// 价格模拟服务器的数据
let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]

/* 
    1.遍历数组data，组装数据为HTML代码，再把组装好的代码渲染到right-pirce里
        定义自定义属性
*/ 
    //获取元素
    let rightPriceUl=document.querySelector('.right-price') //ul
    //定义变量保存组装好的数据
    let priceHtml=''
    //遍历数组
    data.forEach(function(v,i){ //v:遍历数组里的每一个对象 ，i:遍历的每一个对象索引
        //拿到count
        priceHtml+=`
        <li class="${i===0?'active':''}" data-price=${v.price} data-unit-price=${v.unitPrice}>${v.count}次</li>
        `
        
    })
        //数据渲染
        rightPriceUl.innerHTML+=priceHtml

/* 
    2.利用事件委派，将点击事件绑定在right-prices上，给当前事件源添加激活元素（active）
*/
    //获取元素
    let allPrice=document.querySelector('.all-price') //第五行的总价
    let unitPrice=document.querySelector('.unit-price') //第五行的单价

    rightPriceUl.addEventListener('click',function(e){
        //筛选目标事件源，定义变量保存
        let bool=e.target.nodeName==='LI' && e.target.className!='code-test'
        //判断
        if(bool){
            //先干掉rightPriceUl下所有子节点的激活样式
                //需要循环
            for(let i=1; i<rightPriceUl.children.length;i++){
                rightPriceUl.children[i].className=''
            }
            //给当前事件源添加激活样式
            e.target.className='active'

            //把自定义属性price渲染到all-price里
            allPrice.textContent=e.target.dataset.price
            //把自定义属性unitPrice渲染到unit-price里
            unitPrice.textContent=e.target.dataset.unitPrice
        }
    })



/* 
    3.选项卡效果，调用tab.js
*/
    tab('.nav-text li','.body-cont-left')//选项卡的菜单，选项卡的内容
        